Web Development Scatter Plot: গাইড ও নোট

Scatter Plot বা স্ক্যাটার চার্ট হলো এমন একটি চার্ট যা এক্স এবং ওয়াই অক্ষের উপর ডেটার পয়েন্টগুলো প্লট করে। এটি ডেটার মধ্যে সম্পর্ক বা ট্রেন্ড বোঝাতে সহায়ক, যেমন দুইটি ভেরিয়েবলের মধ্যে সম্পর্ক (Correlation) বা বিভিন্ন ডেটা পয়েন্টের বিচ্যুতি। Chart.js-এ স্ক্যাটার চার্ট ব্যবহার করে এই ধরনের ডেটা ভিজ্যুয়ালাইজ করা যায়।

Scatter Plot এর ব্যবহার

• বৈজ্ঞানিক গবেষণা: এক্স এবং ওয়াই অক্ষের ওপর বৈজ্ঞানিক ডেটার পয়েন্টের সম্পর্ক বোঝাতে।
• ইঞ্জিনিয়ারিং ও পরিমাপ: কোন প্রক্রিয়ার বিভিন্ন পরামিতির সম্পর্ক দেখাতে।
• মার্কেট রিসার্চ: দুইটি পরিসংখ্যানের মধ্যে সম্পর্ক বোঝাতে, যেমন বিজ্ঞাপনের খরচ এবং বিক্রয়।

Scatter Plot এর গঠন

একটি স্ক্যাটার চার্টে, প্রতিটি ডেটা পয়েন্ট সাধারণত দুটি ভেরিয়েবলের মানকে প্রতিফলিত করে:

• x: এক্স-অক্ষের মান।
• y: ওয়াই-অক্ষের মান।
• r (অপশনাল): বুদবুদ চার্টের জন্য আকার (radius)।

উদাহরণ: Scatter Plot Chart

Chart.js-এ স্ক্যাটার চার্ট তৈরি করার জন্য, প্রথমে ডেটা পয়েন্টের x এবং y মানগুলো নির্দিষ্ট করতে হয়। নিচে একটি সাধারণ স্ক্যাটার প্লট উদাহরণ দেওয়া হলো:

const ctx = document.getElementById('myChart').getContext('2d');

const scatterChart = new Chart(ctx, {
    type: 'scatter', // চার্টের ধরন: স্ক্যাটার
    data: {
        datasets: [{
            label: 'My Dataset',
            data: [
                { x: 10, y: 20 },
                { x: 15, y: 25 },
                { x: 30, y: 40 },
                { x: 45, y: 60 },
                { x: 60, y: 80 },
                { x: 70, y: 90 }
            ],
            backgroundColor: 'rgba(75, 192, 192, 1)', // পয়েন্টের রঙ
            borderColor: 'rgba(75, 192, 192, 1)', // বর্ডার রঙ
            borderWidth: 1, // বর্ডারের প্রস্থ
            pointRadius: 5 // পয়েন্টের আকার
        }]
    },
    options: {
        responsive: true, // রেসপন্সিভ ডিজাইন
        scales: {
            x: {
                type: 'linear', // এক্স-অক্ষের টাইপ (লাইন)
                position: 'bottom' // এক্স-অক্ষ নিচে থাকবে
            },
            y: {
                type: 'linear', // ওয়াই-অক্ষের টাইপ (লাইন)
                beginAtZero: true // ওয়াই-অক্ষ শূন্য থেকে শুরু হবে
            }
        }
    }
});

Code Breakdown:

1. type: 'scatter': এটি চার্টের ধরন নির্দেশ করে, এখানে এটি স্ক্যাটার চার্ট।
2. data: ডেটাসেটের তথ্য।
   • datasets: এখানে একটি ডেটাসেট ব্যবহৃত হয়েছে, কিন্তু আপনি একাধিক ডেটাসেটও ব্যবহার করতে পারেন।
   • data: এটি একটি অ্যারে যা ডেটা পয়েন্টগুলোর এক্স এবং ওয়াই মান ধারণ করে। প্রতিটি ডেটা পয়েন্ট {x: value, y: value} আকারে থাকে।
   • backgroundColor: পয়েন্টের রঙ।
   • pointRadius: পয়েন্টের আকার।
   • borderColor এবং borderWidth: পয়েন্টের বর্ডার রঙ এবং প্রস্থ কাস্টমাইজ করা যায়।
3. options: এই অংশে চার্টের কাস্টমাইজেশন অপশন আছে।
   • scales: এক্স এবং ওয়াই অক্ষের স্কেল কনফিগারেশন।
     • x এবং y এর জন্য type: 'linear' ব্যবহার করা হয়েছে, যেহেতু স্ক্যাটার চার্টে এক্স এবং ওয়াই মান গাণিতিক।

Scatter Plot Chart Styling

১. ডেটা পয়েন্টের আকার পরিবর্তন

pointRadius: 10, // পয়েন্টের আকার বড় বা ছোট করা যায়

২. বর্ডার এবং রঙ পরিবর্তন

borderColor: 'rgba(255, 99, 132, 1)', // পয়েন্টের বর্ডারের রঙ পরিবর্তন
backgroundColor: 'rgba(75, 192, 192, 1)', // পয়েন্টের অভ্যন্তরীণ রঙ পরিবর্তন

৩. একাধিক ডেটাসেট ব্যবহার

একাধিক ডেটাসেট যোগ করলে আপনি একাধিক গ্রুপের পয়েন্ট দেখতে পারবেন। উদাহরণ:

datasets: [
    {
        label: 'Dataset 1',
        data: [{x: 10, y: 20}, {x: 30, y: 50}],
        backgroundColor: 'rgba(75, 192, 192, 1)'
    },
    {
        label: 'Dataset 2',
        data: [{x: 15, y: 25}, {x: 40, y: 60}],
        backgroundColor: 'rgba(153, 102, 255, 1)'
    }
]

Scatter Plot এর উন্নত কাস্টমাইজেশন

1. Tooltips: আপনি যখন পয়েন্টে মাউস হোভার করবেন, তখন টুলটিপ প্রদর্শন করতে পারেন।

plugins: {
    tooltip: {
        enabled: true, // টুলটিপ সক্রিয়
        mode: 'index', // টুলটিপ প্রদর্শন করার উপায়
    }
}

2. Legends: ডেটাসেটের লেবেল (Legends) কাস্টমাইজ করা:

plugins: {
    legend: {
        display: true, // লেজেন্ড প্রদর্শন
        position: 'top' // লেজেন্ডের অবস্থান
    }
}

3. Gridlines এবং Ticks: এক্স এবং ওয়াই অক্ষের গ্রিডলাইন এবং টিকস কাস্টমাইজ করা:

scales: {
    x: {
        grid: {
            display: true, // গ্রিডলাইন প্রদর্শন
            color: 'rgba(0, 0, 0, 0.1)' // গ্রিডলাইন রঙ
        }
    },
    y: {
        grid: {
            display: true, // গ্রিডলাইন প্রদর্শন
            color: 'rgba(0, 0, 0, 0.1)' // গ্রিডলাইন রঙ
        }
    }
}

সারাংশ

Chart.js এর scatter plot চার্ট বিভিন্ন ডেটা পয়েন্টের সম্পর্ক বা বিভিন্ন ভেরিয়েবলের মধ্যে সম্পর্ক বুঝতে সাহায্য করে। এটি সহজে কাস্টমাইজ করা যায়, যেমন পয়েন্টের আকার, রঙ, এবং বর্ডার, এবং একাধিক ডেটাসেট যোগ করে আপনি আরো বেশি ভিজ্যুয়াল তথ্য প্রদর্শন করতে পারেন। এই চার্টটি বিশেষভাবে ডেটার মধ্যে সম্পর্ক বা ট্রেন্ড বিশ্লেষণে উপকারী।

Scatter Plot (স্ক্যাটার চার্ট) হল একটি গ্রাফ যেখানে এক্স এবং ওয়াই অক্ষের উপর ডেটা পয়েন্টগুলি প্লট করা হয়। এটি দুইটি ভ্যারিয়েবলের মধ্যে সম্পর্ক এবং তাদের মধ্যে যে কোনো প্যাটার্ন বা ট্রেন্ড আছে কিনা তা বিশ্লেষণ করতে ব্যবহৃত হয়।

Chart.js এ Scatter Plot তৈরি করার জন্য সহজেই ডেটা পয়েন্টগুলিকে প্লট করা যায়, যা আপনাকে দুই ভ্যারিয়েবলের সম্পর্ক প্রদর্শন করতে সহায়তা করে। উদাহরণস্বরূপ, আপনি যদি দুটি ভ্যারিয়েবলের (যেমন, তাপমাত্রা এবং আর্দ্রতা) সম্পর্ক বিশ্লেষণ করতে চান, তাহলে Scatter Plot ব্যবহার করতে পারেন।

Scatter Plot এর জন্য Chart.js কনফিগারেশন

প্রথমে, Chart.js এর মাধ্যমে একটি scatter চার্ট তৈরি করতে হবে। এখানে আমরা একটি সাধারণ উদাহরণ দেখাবো, যেখানে এক্স-অক্ষ এবং ওয়াই-অক্ষের মানের ভিত্তিতে ডেটা পয়েন্ট প্লট করা হবে।

উদাহরণ কোড: Scatter Plot

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Scatter Plot</title>
</head>
<body>
    <h1>Scatter Plot - Two Variables Relationship</h1>
    <canvas id="myScatterChart" width="400" height="200"></canvas>

    <!-- Chart.js Library -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        const ctx = document.getElementById('myScatterChart').getContext('2d');
        const scatterChart = new Chart(ctx, {
            type: 'scatter', // Scatter chart type
            data: {
                datasets: [{
                    label: 'Temperature vs Humidity',
                    data: [
                        {x: 10, y: 20}, // X and Y coordinates
                        {x: 20, y: 30},
                        {x: 30, y: 40},
                        {x: 40, y: 50},
                        {x: 50, y: 60},
                        {x: 60, y: 70},
                        {x: 70, y: 80},
                        {x: 80, y: 90}
                    ],
                    backgroundColor: 'rgba(75, 192, 192, 1)', // Point color
                    borderColor: 'rgba(75, 192, 192, 1)', // Border color of points
                    borderWidth: 2 // Border width
                }]
            },
            options: {
                responsive: true,
                scales: {
                    x: {
                        type: 'linear', // X-axis type is linear
                        position: 'bottom',
                        title: {
                            display: true,
                            text: 'Temperature (°C)' // X-axis label
                        }
                    },
                    y: {
                        type: 'linear', // Y-axis type is linear
                        title: {
                            display: true,
                            text: 'Humidity (%)' // Y-axis label
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

কোড বিশ্লেষণ

1. HTML Canvas: <canvas id="myScatterChart" width="400" height="200"></canvas> – এখানে একটি <canvas> ট্যাগ ব্যবহার করা হয়েছে, যেখানে Scatter Plot চার্ট রেন্ডার হবে।
2. Chart.js লাইব্রেরি: <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> – Chart.js লাইব্রেরি লোড করা হয়েছে।
3. Scatter Plot কনফিগারেশন:
   • type: 'scatter': এটি নির্ধারণ করে যে চার্টটি একটি Scatter Plot হবে।
   • data: এখানে datasets এর মধ্যে ডেটা পয়েন্টগুলো x এবং y এর মান হিসেবে প্রদান করা হয়েছে।
   • backgroundColor এবং borderColor: প্রতিটি ডেটা পয়েন্টের জন্য পটভূমি এবং বর্ডার রঙ নির্ধারণ করা হয়েছে।
   • scales: এক্স এবং ওয়াই অক্ষের জন্য স্কেল কনফিগারেশন, যেখানে type: 'linear' ব্যবহার করা হয়েছে, কারণ আমরা দুইটি সিংহভাগ ভ্যারিয়েবলের মধ্যে সম্পর্ক দেখাচ্ছি।
4. Axes Titles: এক্স এবং ওয়াই অক্ষের শিরোনাম কাস্টমাইজ করা হয়েছে, যেমন "Temperature (°C)" এবং "Humidity (%)"।

Scatter Plot কাস্টমাইজেশন

Scatter Plot কাস্টমাইজ করতে আপনি কয়েকটি পরিবর্তন করতে পারেন:

1. Data Point Customization:
   • size: প্রতিটি পয়েন্টের আকার পরিবর্তন করতে পারেন।
   • shape: বিভিন্ন আকৃতির পয়েন্ট ব্যবহার করতে পারেন (যেমন গোল, আয়তক্ষেত্র, ট্রায়াঙ্গেল)।
2. Gridlines এবং Ticks:
   • আপনি এক্স এবং ওয়াই অক্ষের gridlines এবং ticks কাস্টমাইজ করতে পারেন, যাতে ডেটা পয়েন্টগুলির মধ্যে সঠিক সম্পর্ক বোঝা যায়।
3. Tooltips:
   • tooltip অপশন দিয়ে আপনি প্রতিটি ডেটা পয়েন্টের উপর ক্লিক করলে অতিরিক্ত তথ্য দেখাতে পারেন।

উদাহরণ: Tooltip কাস্টমাইজেশন

options: {
    responsive: true,
    plugins: {
        tooltip: {
            callbacks: {
                label: function(tooltipItem) {
                    return `Temperature: ${tooltipItem.raw.x}°C, Humidity: ${tooltipItem.raw.y}%`;
                }
            }
        }
    }
}

এখানে, টুলটিপে Temperature এবং Humidity মান কাস্টমাইজ করা হয়েছে।

Scatter Plot এর ব্যবহার

Scatter Plot ব্যবহার করে আপনি বিভিন্ন ক্ষেত্রের মধ্যে সম্পর্ক বিশ্লেষণ করতে পারেন। উদাহরণস্বরূপ:

• বিজ্ঞান ও প্রকৌশল: দুইটি ভ্যারিয়েবলের সম্পর্ক বিশ্লেষণ যেমন তাপমাত্রা ও আর্দ্রতা, চাপ ও গতি ইত্যাদি।
• অর্থনীতি: স্টক মার্কেটের দাম এবং সময়ের মধ্যে সম্পর্ক।
• সমাজবিজ্ঞান: শিক্ষা এবং আয়ের মধ্যে সম্পর্ক।

সারাংশ

Chart.js এর মাধ্যমে Scatter Plot একটি শক্তিশালী এবং সহজ উপায় যা আপনাকে দুটি ভ্যারিয়েবলের সম্পর্ক বিশ্লেষণ করতে সহায়তা করে। আপনি এই চার্টটি ডেটার প্যাটার্ন, ট্রেন্ড, অথবা কোন সম্পর্ক রয়েছে কিনা তা দেখানোর জন্য ব্যবহার করতে পারেন। Scatter Plot কাস্টমাইজেশন দিয়ে আপনি গ্রাফটির দৃষ্টিনন্দনতা এবং কার্যকারিতা উন্নত করতে পারবেন।

Chart.js-এ পয়েন্ট সাইজ এবং রঙ কাস্টমাইজেশন করা খুবই সহজ এবং এটি ডেটার ভিজ্যুয়ালাইজেশনকে আরও আকর্ষণীয় এবং বোধগম্য করতে সাহায্য করে। বিশেষ করে যখন আপনি স্ক্যাটার বা বাবল চার্ট ব্যবহার করছেন, তখন প্রতিটি পয়েন্টের সাইজ এবং রঙ কাস্টমাইজ করে ডেটা পয়েন্টগুলিকে আলাদা করতে পারেন।

এখানে Point Size এবং Color কাস্টমাইজেশন করার প্রক্রিয়া নিয়ে আলোচনা করা হয়েছে।

১. Point Size কাস্টমাইজেশন

Chart.js-এ, পয়েন্টের সাইজ পরিবর্তন করতে হয় dataset এর মধ্যে pointRadius অপশন ব্যবহার করে। পয়েন্টের আকার পরিবর্তন করে আপনি প্রতিটি ডেটা পয়েন্টের দৃশ্যমানতা বাড়াতে বা কমাতে পারেন।

উদাহরণ: স্ক্যাটার চার্টে Point Size কাস্টমাইজেশন

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'Scatter Dataset',
            data: [{
                x: 10,
                y: 20
            }, {
                x: 15,
                y: 30
            }, {
                x: 20,
                y: 40
            }],
            pointRadius: 10, // Point size নির্ধারণ
            backgroundColor: 'rgba(75, 192, 192, 1)', // পয়েন্টের রঙ
        }]
    }
});

কাস্টমাইজেশন:

• pointRadius: এটি পয়েন্টের আকার (radius) নিয়ন্ত্রণ করে। এর মান বৃদ্ধি করলে পয়েন্ট বড় হবে, এবং কমালে ছোট হবে।

২. Point Color কাস্টমাইজেশন

Chart.js-এ, পয়েন্টের রঙ পরিবর্তন করতে backgroundColor এবং borderColor ব্যবহার করা হয়।

• backgroundColor: পয়েন্টের ভিতরের রঙ পরিবর্তন করে।
• borderColor: পয়েন্টের বর্ডারের রঙ পরিবর্তন করে।

উদাহরণ: স্ক্যাটার চার্টে Point Color কাস্টমাইজেশন

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'Custom Point Color Dataset',
            data: [{
                x: 10,
                y: 20
            }, {
                x: 15,
                y: 30
            }, {
                x: 20,
                y: 40
            }],
            pointRadius: 8,
            backgroundColor: 'rgba(255, 99, 132, 1)', // পয়েন্টের ভিতরের রঙ
            borderColor: 'rgba(54, 162, 235, 1)', // পয়েন্টের বর্ডারের রঙ
            borderWidth: 3 // বর্ডারের প্রস্থ
        }]
    }
});

কাস্টমাইজেশন:

• backgroundColor: পয়েন্টের ভিতরের রঙ নির্ধারণ করতে এটি ব্যবহার করুন।
• borderColor: পয়েন্টের চারপাশের বর্ডারের রঙ নির্ধারণ করতে এটি ব্যবহার করুন।
• borderWidth: পয়েন্টের বর্ডারের প্রস্থ পরিবর্তন করতে এটি ব্যবহার করুন।

৩. একাধিক পয়েন্টের সাইজ এবং রঙ কাস্টমাইজেশন

Chart.js-এ, আপনি প্রতিটি ডেটা পয়েন্টের জন্য আলাদা সাইজ এবং রঙ সেট করতে পারেন। এর জন্য, আপনি dataset এর মধ্যে একটি অ্যারে ব্যবহার করে pointRadius এবং backgroundColor কাস্টমাইজ করতে পারবেন।

উদাহরণ: স্ক্যাটার চার্টে একাধিক পয়েন্টের সাইজ এবং রঙ কাস্টমাইজেশন

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'Variable Size and Color Dataset',
            data: [{
                x: 10,
                y: 20,
                radius: 5, // বিশেষ পয়েন্টের আকার
                backgroundColor: 'rgba(255, 99, 132, 1)' // বিশেষ পয়েন্টের রঙ
            }, {
                x: 15,
                y: 30,
                radius: 10, // অন্য একটি পয়েন্টের আকার
                backgroundColor: 'rgba(54, 162, 235, 1)' // অন্য একটি পয়েন্টের রঙ
            }, {
                x: 20,
                y: 40,
                radius: 15, // আরও বড় পয়েন্ট
                backgroundColor: 'rgba(75, 192, 192, 1)' // অন্য রঙ
            }],
            borderColor: 'rgba(0, 0, 0, 1)', // সব পয়েন্টের বর্ডার রঙ
            borderWidth: 1
        }]
    }
});

কাস্টমাইজেশন:

• radius: আপনি প্রতিটি ডেটা পয়েন্টের জন্য আলাদা সাইজ নির্ধারণ করতে পারেন।
• backgroundColor: প্রতিটি পয়েন্টের জন্য আলাদা রঙ নির্ধারণ করতে পারেন।

৪. কাস্টম পয়েন্ট স্টাইল (Custom Point Style)

Chart.js-এ, পয়েন্টের স্টাইল কাস্টমাইজ করতে pointStyle ব্যবহার করা হয়, যেখানে আপনি পয়েন্টকে সেল, ট্রায়াঙ্গল, স্কোয়ার, স্টার ইত্যাদিতে পরিবর্তন করতে পারেন।

উদাহরণ: কাস্টম পয়েন্ট স্টাইল

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'Custom Point Style Dataset',
            data: [{
                x: 10,
                y: 20
            }, {
                x: 15,
                y: 30
            }, {
                x: 20,
                y: 40
            }],
            pointRadius: 10,
            pointStyle: 'star', // পয়েন্টকে 'স্টার' আকারে প্রদর্শন
            backgroundColor: 'rgba(153, 102, 255, 1)',
            borderColor: 'rgba(255, 159, 64, 1)',
            borderWidth: 2
        }]
    }
});

কাস্টমাইজেশন:

• pointStyle: এখানে পয়েন্টের স্টাইল হিসেবে 'star' ব্যবহৃত হয়েছে, তবে আপনি অন্যান্য স্টাইল যেমন 'circle', 'triangle', 'rect' ইত্যাদি ব্যবহার করতে পারেন।

সারাংশ

Chart.js-এ Point Size এবং Color কাস্টমাইজেশন করার মাধ্যমে আপনি আপনার চার্টের ডেটা পয়েন্টগুলিকে আলাদা এবং আরও আকর্ষণীয়ভাবে উপস্থাপন করতে পারেন। এই কাস্টমাইজেশনগুলো খুবই শক্তিশালী, কারণ এগুলো আপনার চার্টের ভিজ্যুয়াল প্রেজেন্টেশনকে উন্নত করে, যেমন:

• pointRadius: পয়েন্টের আকার নির্ধারণ করে।
• backgroundColor: পয়েন্টের রঙ নির্ধারণ করে।
• borderColor: পয়েন্টের বর্ডারের রঙ নির্ধারণ করে।
• pointStyle: পয়েন্টের স্টাইল পরিবর্তন করে।

এগুলি ব্যবহারের মাধ্যমে আপনি একটি আরও ইন্টার‌্যাকটিভ এবং ব্যবহারকারীর দৃষ্টি আকর্ষণকারী চার্ট তৈরি করতে পারবেন।